<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            border: 1px solid;
            background: #fff;
        }
    </style>
</head>

<body>
    <canvas width="400" height="400" id="canvas">
        请升级你的服务器
    </canvas>
    <img src="https://img1.baidu.com/it/u=3172398554,4117584963&fm=26&fmt=auto&gp=0.jpg" alt="">
    <script>
        var canvas = document.querySelector('#canvas')
        var context = canvas.getContext('2d');
        var img = new Image()
        img.src ='https://img1.baidu.com/it/u=3172398554,4117584963&fm=26&fmt=auto&gp=0.jpg'
    
        img.onload = function () {
            console.log(img.width + 50,img.height + 50)
            // context.fillRect(10,10,200,200);
            // context.translate(img.width/2, img.height/2);
            var x = 0,deg = 0;
            setInterval(() => {
                context.clearRect(0, 0, canvas.width, canvas.height);
                x+=1;
                x>400 && (x=0);
                deg+=0.01;
                context.save();
                context.translate(x, 200);
                context.rotate(deg);
                context.drawImage(img, -img.width/2, -img.height/2)
                context.restore();
            }, 16.7);
            //  context.drawImage(img, 0, 0, img.width, img.height);
        }
       
        





    </script>
</body>

</html>